<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-wordcloud'
import {onMounted, reactive, ref} from "vue";

const chartLhz = ref();

// const chartLhz = useTemplateRef('chartLhz');
// 接受父组件传递的图表的配置项和数据
const props = defineProps(['chart_option'])
const {chart_option} = props;
// 指定图表的配置项和数据
const option = reactive({});

function chartLhzInit() {
  // 基于准备好的dom，初始化echarts实例
  let LhzChart = echarts.init(chartLhz.value);
  // 指定图表的配置项和数据
  for (const filed in chart_option) {
    // 将父组件中传递过来的对象属性赋值给本地的对象
    option[filed] = chart_option[filed];
  }
  // 使用刚指定的配置项和数据显示图表。
  LhzChart.setOption(option);
  window.addEventListener('resize', () => {
    LhzChart.resize();
  })
}

onMounted(() => {
  // 在挂载阶段 初始化 echarts 实例
  chartLhzInit();
});
</script>

<template>
  <div id="chartLhz" ref="chartLhz"></div>
</template>

<style scoped lang="scss">
#chartLhz {
  width: 100%;
  height: 100%;
}
</style>